<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>排行榜</title>
    <link rel="stylesheet" href="styles/style.css" />
    <link rel="stylesheet" href="styles/icon.css" />
  </head>
  <body>
    <div class="page">
      <header class="top">
        <div class="top-title">排行榜</div>
        <nav class="tabs">
          <ul>
            <li class="tab-item tab-active">
              <i class="iconfont icon-activity"></i>好文精选
            </li>
            <li class="tab-item"><i class="iconfont icon-fire"></i>热门资讯</li>
          </ul>
        </nav>
        <nav class="cats">
          <ul class="cat-list">
            <li class="cat-item cat-active">文章</li>
          </ul>
        </nav>
      </header>
      <main class="list">
        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/1.png" class="cover-img" />
              <img src="imgs/rank-top1.png" class="cover-rank" />
            </div>
            <div class="info">
              <div class="sku-title">
                宝马召回超33万辆汽车
              </div>
              <div class="meta-info">
                <div class="tags">
                  <span class="tag">#科技</span>
                </div>
                <div class="stats">
                  <div class="stat-item">
                    <i class="iconfont icon-comment"></i>
                    <span>230</span>
                  </div>
                  <div class="stat-item">
                    <i class="iconfont icon-thumb"></i>
                    <span>170</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/2.png" class="cover-img" />
              <img src="imgs/rank-top2.png" class="cover-rank" />
            </div>
            <div class="info">
              <div class="sku-title">习近平同古共中央第一书记互致贺电</div>
              <div class="meta-info">
                <div class="tags">
                  <span class="tag">#新闻</span>
                </div>
                <div class="stats">
                  <div class="stat-item">
                    <i class="iconfont icon-comment"></i>
                    <span>230</span>
                  </div>
                  <div class="stat-item">
                    <i class="iconfont icon-thumb"></i>
                    <span>170</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/3.png" class="cover-img" />
              <img src="imgs/rank-top3.png" class="cover-rank" />
            </div>
            <div class="info">
              <div class="sku-title">
                “蔬”香齐鲁·山东蔬菜美食争霸赛新闻发布会召开
              </div>
              <div class="meta-info">
                <div class="tags">
                  <span class="tag">#美食</span>
                </div>
                <div class="stats">
                  <div class="stat-item">
                    <i class="iconfont icon-comment"></i>
                    <span>200</span>
                  </div>
                  <div class="stat-item">
                    <i class="iconfont icon-thumb"></i>
                    <span>166</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/4.png" class="cover-img" />
              <img src="imgs/rank-top4.png" class="cover-rank" />
            </div>
            <div class="info">
              <div class="sku-title">
                国家统计局发布我国8月份经济运行数据
              </div>
              <div class="meta-info">
                <div class="tags">
                  <span class="tag">#经济</span>
                </div>
                <div class="stats">
                  <div class="stat-item">
                    <i class="iconfont icon-comment"></i>
                    <span>168</span>
                  </div>
                  <div class="stat-item">
                    <i class="iconfont icon-thumb"></i>
                    <span>130</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/5.png" class="cover-img" />
              <img src="imgs/rank-top5.png" class="cover-rank" />
            </div>
            <div class="info">
              <div class="sku-title">
                海南三亚“永不落幕的消博会”展馆吸引大量客商
              </div>
              <div class="meta-info">
                <div class="tags">
                  <span class="tag">#贸易</span>
                </div>
                <div class="stats">
                  <div class="stat-item">
                    <i class="iconfont icon-comment"></i>
                    <span>56</span>
                  </div>
                  <div class="stat-item">
                    <i class="iconfont icon-thumb"></i>
                    <span>89</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </main>
    </div>
  </body>
</html>
